import React, { Component } from "react";
import './css/index.css'
class Index extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: 'hello',
            list: [], completed: []
        }
    }
    render() {
        const ListItem = this.state.list.map(
            (item, index) => {
                return (
                    <div key={item} className="list">
                        <input type="checkbox" onChange={this.handleChanges.bind(this, index, 'list')} />
                        <span>{index + 1}</span> {item}
                        <button className="delete" onClick={this.handleDelete.bind(this, index, 'list')}>删除</button>
                    </div>
                )
            }
        )
        const completedItem = this.state.completed.map(
            (item, index) => {
                return (
                    <div key={item} className="list">
                        <input type="checkbox" checked onChange={this.handleChanges.bind(this, index)} />
                        <span>{index + 1}</span> {item}
                        <button className="delete" onClick={this.handleDelete.bind(this, index)}>删除</button>

                    </div>
                )
            }
        )
        return (
            <div className="page">
                <h1 className="title">ToDoList</h1>
                <input type="text" value={this.state.msg}
                    onChange={this.handleChange}
                    onKeyUp={this.handleEnter}
                    placeholder="123456789" />
                <div className="txt">
                    <h2 className={this.state.list.length ? 'isShow' : 'Notshow'}>未完成{this.state.list.length}</h2>
                    {ListItem}
                </div>
                <div className="txt">
                    <h2 className={this.state.completed.length ? 'isShow' : 'Notshow'}>已完成{this.state.completed.length}</h2>
                    {completedItem}
                </div>
            </div>
        )
    }
    // 双向数据流
    handleChange = (event) => {
        // console.log(event.target.value);
        // console.log(this.state.msg);
        this.setState({
            msg: event.target.value
        })
    }
    handleEnter = (e) => {
        var value = this.state.msg.trim()
        if (e.keyCode === 13 && value !== '') {
            var list = this.state.list
            var completed = this.state.completed
            if (!list.includes(value)&&!completed.includes(value)) {
                list.push(value)
            } else {
                alert('输入重复')
            }
            localStorage.setItem('list', JSON.stringify(list))
            this.setState({
                list: list,
                msg: ''
            })

        }
    }
    handleDelete(index, val) {
        if (val === 'list') {
            var list = this.state.list
            list.splice(index, 1)
            localStorage.setItem('list', JSON.stringify(list))
            this.setState({
                list: list
            })
        } else {
            var completed = this.state.completed
            completed.splice(index, 1)
            localStorage.setItem('completed', JSON.stringify(completed))
            this.setState({
                completed: completed
            })
        }

    }
    handleChanges(index, val) {
        var list = this.state.list
        var completed = this.state.completed
        if (val === 'list') {
            completed.push(...list.splice(index, 1))
            localStorage.setItem('list', JSON.stringify(list))
            localStorage.setItem('completed', JSON.stringify(completed))
            this.setState({
                list: list,
                completed: completed
            })
        } else {
            list.push(...completed.splice(index, 1))
            localStorage.setItem('list', JSON.stringify(list))
            localStorage.setItem('completed', JSON.stringify(completed))
            this.setState({
                list: list,
                completed: completed
            })
        }
    }
    componentDidMount() {
        var list = localStorage.getItem('list')
        var completed = localStorage.getItem('completed')
        if (list) {
            this.setState({
                list: JSON.parse(list)
            })
        }
        if (completed) {
            this.setState({
                completed: JSON.parse(completed)
            })
        }
    }
}
export default Index